<script setup lang="ts">
import { useToPage } from '@/common/use/common';

// typescript
interface IProps {
  easy?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  easy: false
});
const { navigateTo } = useToPage();
</script>

<!-- 订单列表卡片 -->
<template>
  <view class="w-components-container w-order-item" @click="navigateTo('/pages/order-detail/order-detail?orderId=123')">
    <view class="item-header" v-if="!easy">
      <view><text>订单号：100000000001</text></view>
      <view><text>待付款</text></view>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <w-commodity-list>
        <template #sale="{ item }">
          数量：x1
        </template>
      </w-commodity-list>
    </view>
    <!-- 总金额 -->
    <view class="item-header amount" v-if="!easy">
      <view><text>2022-12-18 12:00:00</text></view>
      <view><text class="acmount-text">金额：￥2000.00</text></view>
    </view>
    <!-- 按钮 -->
    <view class="button-view" v-if="!easy">
      <!-- 未付款 -->
      <template v-if="true">
        <button hover-class="hover-class-opacity">取消订单</button>
        <button hover-class="hover-class-opacity">立即付款</button>
      </template>
      <!-- 已付款 -->
      <template v-else-if="false">
        <button hover-class="hover-class-opacity">取消订单</button>
      </template>
      <!-- 已发货 -->
      <template v-else-if="false">
        <button hover-class="hover-class-opacity">确定收货</button>
      </template>
      <!-- 已完成 未评价 -->
      <template v-else-if="false">
        <button hover-class="hover-class-opacity">立即评价</button>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-order-item {
  background-color: #fff;
  padding: 0 30rpx;
}

.item-header {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid $border-color;

  text {
    font-size: 28rpx;
    color: $text-color;
  }
}

.goods-list {
  :deep(.w-commodity-list) {
    .uni-list-item__container {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.amount {
  .acmount-text {
    color: $amount-color;
  }
}

.button-view {
  display: flex;
  padding: 20rpx 0;
  justify-content: flex-end;

  button {
    width: 160rpx;
    height: 60rpx;
    border-radius: 44px;
    border: 1px solid $primary-color;
    color: $primary-color;
    font-size: 24rpx;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    margin: 0;
    margin-left: 20rpx;

    &::after {
      display: none;
    }
  }
}
</style>